<template>
  <div class="travel-itinerary max-w-screen-xl mx-auto px-4 py-8">
    <!-- 封面图 -->
    <div class="relative w-full h-64 md:h-80 mb-6 rounded-xl overflow-hidden">
      <img
          src="/images/cover-image.jpg"
          alt="旅行封面图"
          class="w-full h-full object-cover"
      />
      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/70"></div>
      <div class="absolute bottom-0 left-0 p-6 text-white">
        <h1 class="text-3xl md:text-4xl font-bold mb-2">北京 - {{ tripData.trip.destination }} {{ tripData.trip.duration }}之旅</h1>
        <div class="flex items-center">
          <i class="fas fa-calendar mr-2"></i>
          <span>{{ tripData.trip.duration }}行程 | 精致旅游 | 山水风光</span>
        </div>
      </div>
    </div>

    <!-- 页面内容 -->
    <div class="flex flex-col lg:flex-row gap-6">
      <!-- 主内容区 -->
      <div class="lg:w-2/3">
        <!-- 快速导航 -->
        <div class="bg-white rounded-lg shadow-md p-4 mb-6">
          <div class="flex items-center justify-between mb-4">
            <h2 class="font-bold text-lg">行程概览</h2>
            <div class="flex space-x-4">
              <button class="flex items-center text-blue-600 hover:text-blue-800">
                <i class="fas fa-bookmark mr-1"></i>
                <span>收藏</span>
              </button>
              <button class="flex items-center text-blue-600 hover:text-blue-800">
                <i class="fas fa-share-alt mr-1"></i>
                <span>分享</span>
              </button>
              <button class="flex items-center text-blue-600 hover:text-blue-800">
                <i class="fas fa-print mr-1"></i>
                <span>打印</span>
              </button>
            </div>
          </div>

          <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
            <div class="bg-blue-50 p-3 rounded-lg">
              <p class="text-xs text-gray-500">总天数</p>
              <p class="font-bold">{{ tripData.trip.duration }}</p>
            </div>
            <div class="bg-green-50 p-3 rounded-lg">
              <p class="text-xs text-gray-500">目的地</p>
              <p class="font-bold">{{ tripData.trip.destination }}</p>
            </div>
            <div class="bg-orange-50 p-3 rounded-lg">
              <p class="text-xs text-gray-500">出发地</p>
              <p class="font-bold">北京</p>
            </div>
            <div class="bg-purple-50 p-3 rounded-lg">
              <p class="text-xs text-gray-500">人均费用</p>
              <p class="font-bold">{{ tripData.trip.cost_summary.total }}</p>
            </div>
          </div>

          <div class="flex space-x-3 overflow-x-auto pb-2">
            <a
                v-for="(day, index) in tripData.trip.days"
                :key="index"
                :href="'#day-' + day.day"
                class="px-3 py-2 bg-gray-100 hover:bg-blue-50 rounded whitespace-nowrap text-sm flex-shrink-0"
            >
              第{{ day.day }}天 {{ getDayTitle(day.title) }}
            </a>
          </div>
        </div>

        <!-- 行程详情 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
          <h2 class="text-xl font-bold mb-4 pb-3 border-b">行程详情</h2>

          <div v-for="(day, index) in tripData.trip.days" :key="index" class="mb-8" :id="'day-' + day.day">
            <TripDay :day="day" :index="index" />
          </div>
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="lg:w-1/3">
        <!-- 费用预估 -->
        <CostSummary :costs="tripData.trip.cost_summary" />

        <!-- 注意事项 -->
        <TripNotes :notes="tripData.trip.notes" />

        <!-- 天气预报 -->
        <div class="bg-white rounded-lg shadow-md p-5 mb-6 mt-6">
          <h3 class="text-lg font-bold mb-4">天气预报</h3>
          <div class="flex justify-between">
            <div class="text-center p-2">
              <p class="text-sm text-gray-600">今天</p>
              <i class="fas fa-sun text-2xl text-yellow-500 my-2"></i>
              <p class="font-medium">25°C</p>
            </div>
            <div class="text-center p-2">
              <p class="text-sm text-gray-600">明天</p>
              <i class="fas fa-cloud text-2xl text-gray-400 my-2"></i>
              <p class="font-medium">22°C</p>
            </div>
            <div class="text-center p-2">
              <p class="text-sm text-gray-600">后天</p>
              <i class="fas fa-cloud-sun text-2xl text-blue-400 my-2"></i>
              <p class="font-medium">23°C</p>
            </div>
          </div>
        </div>

        <!-- 相关攻略 -->
        <div class="bg-white rounded-lg shadow-md p-5">
          <h3 class="text-lg font-bold mb-4">相关攻略</h3>
          <div class="space-y-4">
            <div class="flex gap-3">
              <img src="/images/related1.jpg" alt="相关攻略" class="w-20 h-16 object-cover rounded" />
              <div>
                <h4 class="font-medium">秦皇岛三日游完全指南</h4>
                <p class="text-sm text-gray-600">2.5万人浏览</p>
              </div>
            </div>
            <div class="flex gap-3">
              <img src="/images/related2.jpg" alt="相关攻略" class="w-20 h-16 object-cover rounded" />
              <div>
                <h4 class="font-medium">白洋淀周边景点攻略</h4>
                <p class="text-sm text-gray-600">1.8万人浏览</p>
              </div>
            </div>
            <div class="flex gap-3">
              <img src="/images/related3.jpg" alt="相关攻略" class="w-20 h-16 object-cover rounded" />
              <div>
                <h4 class="font-medium">北京出发周边两日游推荐</h4>
                <p class="text-sm text-gray-600">3.2万人浏览</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue';
import TripDay from './GuidComponents/TripDay.vue';
import CostSummary from './GuidComponents/CostSummary.vue';
import TripNotes from './GuidComponents/TripNotes.vue';

export default {
  name: 'TravelItinerary',
  components: {
    TripDay,
    CostSummary,
    TripNotes
  },
  props: {
    // 可以通过props接收父组件传入的旅游数据
    tripDataProp: {
      type: Object,
      default: null
    }
  },
  setup(props) {
    // 如果props中有数据则使用props数据，否则使用默认数据
    const tripData = computed(() => {
      if (props.tripDataProp) {
        return props.tripDataProp;
      }
      // 默认数据
      return {
        "trip": {
          "trip": {
            "duration": "2天",
            "destination": "秦皇岛 + 沧州",
            "days": [
              {
                "day": 1,
                "title": "北京 → 秦皇岛（山海关 + 祖山）",
                "schedule": [
                  {
                    "time": "06:30 - 08:00",
                    "activity": "火车",
                    "details": {
                      "train": "G8921 次高铁",
                      "from": "北京南站",
                      "to": "秦皇岛站",
                      "price": "120 元（二等座）"
                    }
                  },
                  {
                    "time": "08:00 - 08:30",
                    "activity": "早餐",
                    "details": {
                      "location": "北京南站",
                      "recommendation": "庆丰包子铺",
                      "menu": "包子、粥、小菜"
                    }
                  },
                  {
                    "time": "08:30 - 09:00",
                    "activity": "交通",
                    "details": {
                      "type": "打车",
                      "from": "秦皇岛站",
                      "to": "山海关景区",
                      "duration": "30 分钟",
                      "cost": "40 元"
                    }
                  },
                  {
                    "time": "09:00 - 12:00",
                    "activity": "景点",
                    "details": {
                      "name": "山海关景区",
                      "highlights": ["天下第一关", "老龙头"],
                      "duration": "2-3 小时",
                      "ticket": "120 元/人"
                    }
                  },
                  {
                    "time": "12:00 - 13:00",
                    "activity": "午餐",
                    "details": {
                      "location": "山海关",
                      "recommendation": "山海关老字号饭店",
                      "menu": ["红烧海鱼", "山海关豆腐", "海鲜锅贴"],
                      "cost": "60 元/人"
                    }
                  },
                  {
                    "time": "13:00 - 14:00",
                    "activity": "交通",
                    "details": {
                      "type": "打车",
                      "from": "山海关景区",
                      "to": "祖山风景区",
                      "duration": "1 小时",
                      "cost": "80 元"
                    }
                  },
                  {
                    "time": "14:00 - 17:00",
                    "activity": "景点",
                    "details": {
                      "name": "祖山风景区",
                      "highlights": ["天女峰", "祖山瀑布"],
                      "duration": "3-4 小时",
                      "ticket": "80 元/人",
                      "cable_car": "80 元/人"
                    }
                  },
                  {
                    "time": "17:00 - 18:00",
                    "activity": "晚餐",
                    "details": {
                      "location": "祖山景区附近",
                      "recommendation": "祖山农家院",
                      "menu": ["炖土鸡", "山野菜"],
                      "cost": "50 元/人"
                    }
                  },
                  {
                    "time": "18:00",
                    "activity": "住宿",
                    "details": {
                      "hotel": "秦皇岛海景假日酒店",
                      "rating": "四星级",
                      "price": "400 元/晚",
                      "checkout": "次日 08:00"
                    }
                  }
                ]
              },
              {
                "day": 2,
                "title": "秦皇岛 → 沧州（白洋淀） → 北京",
                "schedule": [
                  {
                    "time": "08:30 - 10:00",
                    "activity": "火车",
                    "details": {
                      "train": "G8922 次高铁",
                      "from": "秦皇岛站",
                      "to": "沧州西站",
                      "price": "100 元（二等座）"
                    }
                  },
                  {
                    "time": "10:00 - 11:30",
                    "activity": "交通",
                    "details": {
                      "type": "打车",
                      "from": "沧州西站",
                      "to": "白洋淀景区",
                      "duration": "1.5 小时",
                      "cost": "120 元"
                    }
                  },
                  {
                    "time": "11:30 - 15:00",
                    "activity": "景点",
                    "details": {
                      "name": "白洋淀风景区",
                      "highlights": ["芦苇荡", "荷花淀", "雁翎队纪念馆"],
                      "duration": "3-4 小时",
                      "ticket": "80 元/人",
                      "boat_ticket": "100 元/人"
                    }
                  },
                  {
                    "time": "15:00 - 16:00",
                    "activity": "午餐",
                    "details": {
                      "location": "白洋淀景区",
                      "recommendation": "白洋淀渔家乐",
                      "menu": ["炖杂鱼", "荷叶包饭", "炸荷花"],
                      "cost": "60 元/人"
                    }
                  },
                  {
                    "time": "16:00 - 17:30",
                    "activity": "交通",
                    "details": {
                      "type": "打车",
                      "from": "白洋淀景区",
                      "to": "沧州西站",
                      "duration": "1.5 小时",
                      "cost": "120 元"
                    }
                  },
                  {
                    "time": "18:00 - 19:30",
                    "activity": "火车",
                    "details": {
                      "train": "G8923 次高铁",
                      "from": "沧州西站",
                      "to": "北京南站",
                      "price": "100 元（二等座）"
                    }
                  },
                  {
                    "time": "19:30",
                    "activity": "晚餐",
                    "details": {
                      "location": "北京南站",
                      "recommendation": "南锣肥猫烤鱼",
                      "menu": ["烤鱼", "配菜"],
                      "cost": "80 元/人"
                    }
                  }
                ]
              }
            ],
            "cost_summary": {
              "transport": {
                "train": "320 元",
                "taxi": "400 元"
              },
              "accommodation": "400 元",
              "meals": "300 元",
              "tickets": "280 元",
              "total": "1300 元/人"
            },
            "notes": [
              "提前预订火车票和酒店，避免旺季无票。",
              "白洋淀景区需乘船，建议穿舒适的鞋子和防晒衣物。",
              "祖山海拔较高，注意防寒保暖。",
              "携带身份证、充电宝、雨具等必备物品。"
            ]
          }
        }
      };
    });

    // 提取行程标题中的目的地部分
    const getDayTitle = (title) => {
      const parts = title.split('→');
      return parts.length > 1 ? parts[1].trim() : title;
    };

    return {
      tripData,
      getDayTitle
    };
  }
};
</script>

<style scoped>
/* 添加自定义样式 */
.travel-itinerary {
  color: #333;
}

/* 定义滚动行为，使用锚点时平滑滚动 */
html {
  scroll-behavior: smooth;
}
</style>